<!--
 * @Author: Neko
 * @Date: 2021-04-16 09:41:13
 * @LastEditTime: 2021-04-23 15:33:32
 * @LastEditors: Neko
-->
<template>
  <contents :heightInclude="['tabBar', 'navBar']" class="payment__result">
    <u-navbar
			:background="{ background: '#0049AC' }"
			title-color="#fff"
			:title="$t('locales.paymentResult')"
			:is-back="false"
		></u-navbar>

    <view class="result__body">
      <view class="result__info">
        <view class="result__img">
		      <image v-if="status === 0" class="img" src="@/static/images/pay_waiting.png" />
          <image v-if="status === -1" class="img" src="@/static/images/pay_fail.png" />
          <image v-if="status === 1" class="img" src="@/static/images/pay_success.png" />
        </view>

        <view class="result__title">
		      <text v-if="status === 0">{{ $t('locales.paymentResultWaiting') }}</text>
          <text v-if="status === -1">{{ $t('locales.paymentResultFail') }}</text>
          <text v-if="status === 1">{{ $t('locales.paymentResultSuccess') }}</text>
        </view>

        <view v-if="false" class="result__reason">
          这里将展示支付结果信息
        </view>
      </view>

      <view v-if="status !== 0" class="result__button">
        <u-button class="button" @click="onClickToOrderBtn">{{ $t('locales.viewOrder') }}</u-button>
      </view>
    </view>
  </contents>
</template>

<script>
import { getOrderDetail } from '@/api/http/order.js'

export default {
	data() {
		return {
			routeParams: {},
			
			timer: null,
			
			status: -1
		}
	},
	
	computed: {
		orderId() {
			return this.routeParams.orderid
		}
	},
		
	onLoad(opt) {
		// #ifdef H5
		window.addEventListener('popstate', this.popstateFunc)
		// #endif
		
		this.routeParams = opt
		
		if (this.orderId) {
			this.getData()
		}
	},
	
	beforeDestroy() {
		clearTimeout(this.timer)
	},
	
	destroyed() {
	  // #ifdef H5
	  window.removeEventListener('popstate', this.popstateFunc)
	
	  // #endif
	},
	
	methods: {
		popstateFunc() {
		  // #ifdef H5
		  history.pushState(null, null, location.href)
		  // #endif
		},
		
		async getData() {
			try {
				const res = await getOrderDetail({
					orderId: this.orderId
				})
				
				if (res.code === 200) {
					this.status = res.data
					
					if (res.data === 0) {
						this.timer = setTimeout(this.getData, 2000)
					}
				} else {
					return uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
				
			} catch (e) {
				throw Error(e)
			}
		},

		onClickToOrderBtn() {
		  uni.redirectTo({ url: '/pages/order/details/index?id=' + this.orderId + '&is_pay=1' })
		}
	}
}
</script>

<style lang="scss" scoped>
.payment__result {
  background-color: #fff!important;
}
.result__body {
  .result__info {
    display: flex;
    flex-direction: column;
    padding: 72rpx 0 115rpx;
    justify-content: center;

    .result__img {
      width: 208px;
      height: 185px;
      margin: 0 auto;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .result__title {
      margin: 28px 0 22rpx;
      font-size: 34rpx;
      line-height: 42rpx;
      text-align: center;
      color: #333333;
    }

    .result__reason {
      font-size: 26rpx;
      text-align: center;
      color: #888888;
    }
  }

  .result__button {
    padding: 0 29rpx 0 31rpx;

    .button {

      border-radius: 40rpx;
      color: #fff;
      background: #0049AC;

      &.u-default-hover {
        border-radius: 40px;
      }

      &.u-hairline-border {
        border-width: 0!important;
        border-color: transparent!important;
        border: none;
      }
    }
  }
}
</style>
